<template>
  <view class="home-container">
    <!-- 顶部位置和搜索栏 -->
    <view class="header">
      <view class="location">
        <text>{{ currentLocation }}</text>
        <uni-icons type="arrowdown" size="14" color="#333"></uni-icons>
      </view>
      <view class="search-box">
        <uni-icons type="search" size="18" color="#999"></uni-icons>
        <input type="text" placeholder="搜索家政服务" disabled @click="goToSearch" />
      </view>
    </view>

    <!-- 轮播广告 -->
    <view class="banner">
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="500">
        <swiper-item v-for="(item, index) in bannerList" :key="index">
          <image :src="item.image" mode="aspectFill"></image>
        </swiper-item>
      </swiper>
    </view>

    <!-- 服务分类 -->
    <view class="service-types">
      <view class="type-item" v-for="(item, index) in serviceTypes" :key="index" @click="selectServiceType(item)">
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{ item.name }}</text>
      </view>
    </view>

    <!-- 服务列表标签页 -->
    <view class="service-tabs">
      <view 
        class="tab-item" 
        v-for="(tab, index) in tabs" 
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        <text>{{ tab.name }}</text>
      </view>
    </view>

    <!-- 服务列表 -->
    <view class="service-list">
      <view class="service-item" v-for="(item, index) in serviceList" :key="index" @click="goToServiceDetail(item)">
        <image :src="item.image" mode="aspectFill" class="service-image"></image>
        <view class="service-info">
          <view class="service-title">{{ item.title }}</view>
          <view class="service-desc">{{ item.description }}</view>
          <view class="service-bottom">
            <view class="service-price">
              <text class="price-symbol">¥</text>
              <text class="price-value">{{ item.price }}</text>
            </view>
            <view class="service-time" v-if="item.time">
              <uni-icons type="clock" size="14" color="#999"></uni-icons>
              <text>{{ item.time }}</text>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 热门资讯 -->
    <view class="news-section">
      <view class="section-title">
        <text>家政资讯</text>
        <view class="more" @click="goToNewsList">
          <text>查看全部</text>
          <uni-icons type="right" size="14" color="#999"></uni-icons>
        </view>
      </view>
      <view class="news-list">
        <view class="news-item" v-for="(item, index) in newsList" :key="index" @click="goToNewsDetail(item)">
          <view class="news-content">
            <view class="news-title">{{ item.title }}</view>
            <view class="news-info">
              <text class="news-time">{{ item.time }}</text>
            </view>
          </view>
          <image :src="item.image" mode="aspectFill" class="news-image"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

// 当前位置 
const currentLocation = ref('北京市朝阳区建国路甲8号');

// 轮播图数据
const bannerList = ref([
  { image: '/static/images/banner1.jpg' },
  { image: '/static/images/banner2.jpg' },
  { image: '/static/images/banner3.jpg' }
]);

// 服务类型
const serviceTypes = ref([
  { name: '日常保洁', icon: '/static/images/service1.png' },
  { name: '深度清洁', icon: '/static/images/service2.png' },
  { name: '家电清洗', icon: '/static/images/service3.png' },
  { name: '月嫂服务', icon: '/static/images/service4.png' },
  { name: '特色服务', icon: '/static/images/service5.png' }
]);

// 标签页
const tabs = ref([
  { name: '全部' },
  { name: '日常保洁' },
  { name: '深度清洁' },
  { name: '家电清洗' }
]);
const currentTab = ref(0);

// 服务列表
const serviceList = ref([
  {
    id: 1,
    title: '新房入住全屋深度清洁',
    description: '专业设备/专业清洁剂，彻底除菌',
    price: '399.00',
    image: '/static/images/service_detail1.jpg',
    time: '2小时'
  },
  {
    id: 2,
    title: '厨房油烟机深度清洗',
    description: '专业拆洗/彻底除油/光亮如新',
    price: '199.00',
    image: '/static/images/service_detail2.jpg',
    time: '1小时'
  },
  {
    id: 3,
    title: '家庭地板打蜡保养',
    description: '去污/打蜡/防护，延长地板使用寿命',
    price: '299.00',
    image: '/static/images/service_detail3.jpg',
    time: '3小时'
  }
]);

// 资讯列表
const newsList = ref([
  {
    id: 1,
    title: '家庭清洁小技巧：如何有效去除厨房油污',
    time: '2023-03-15',
    image: '/static/images/news1.jpg'
  },
  {
    id: 2,
    title: '夏季家居保养指南：11个步骤让家焕然一新',
    time: '2023-03-10',
    image: '/static/images/news2.jpg'
  }
]);

// 切换标签页
const switchTab = (index) => {
  currentTab.value = index;
  // 这里可以根据标签加载不同的服务列表
  loadServiceList(index);
};

// 加载服务列表
const loadServiceList = (tabIndex) => {
  // 模拟加载不同标签的服务列表
  uni.showLoading({
    title: '加载中...'
  });
  
  setTimeout(() => {
    uni.hideLoading();
    // 实际项目中应该调用API获取数据
  }, 500);
};

// 选择服务类型
const selectServiceType = (item) => {
  uni.navigateTo({
    url: `/pages/service/list?type=${item.name}`
  });
};

// 跳转到服务详情
const goToServiceDetail = (item) => {
  uni.navigateTo({
    url: `/pages/service/detail?id=${item.id}`
  });
};

// 跳转到搜索页面
const goToSearch = () => {
  uni.navigateTo({
    url: '/pages/search/index'
  });
};

// 跳转到资讯列表
const goToNewsList = () => {
  uni.navigateTo({
    url: '/pages/news/list'
  });
};

// 跳转到资讯详情
const goToNewsDetail = (item) => {
  uni.navigateTo({
    url: `/pages/news/detail?id=${item.id}`
  });
};

// 跳转到订单列表
const goToOrderList = () => {
  uni.navigateTo({
    url: '/pages/order/list'
  });
};

// 跳转到用户中心
const goToUserCenter = () => {
  uni.navigateTo({
    url: '/pages/user/index'
  });
};

onMounted(() => {
  // 页面加载时获取数据
  loadServiceList(currentTab.value);
});
</script>

<style lang="scss" scoped>
.home-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx; // 为底部导航留出空间
}

// 顶部位置和搜索栏
.header {
  display: flex;
  align-items: center;
  padding: 20rpx 30rpx;
  background-color: #fff;
  
  .location {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-right: 20rpx;
    
    text {
      max-width: 180rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  
  .search-box {
    flex: 1;
    height: 70rpx;
    background-color: #f5f5f5;
    border-radius: 35rpx;
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    
    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      margin-left: 10rpx;
    }
  }
}

// 轮播广告
.banner {
  width: 100%;
  height: 300rpx;
  
  swiper {
    width: 100%;
    height: 100%;
    
    swiper-item {
      width: 100%;
      height: 100%;
      
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
}

// 服务分类
.service-types {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  background-color: #fff;
  margin-bottom: 20rpx;
  
  .type-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 120rpx;
    
    image {
      width: 80rpx;
      height: 80rpx;
      margin-bottom: 10rpx;
    }
    
    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

// 服务列表标签页
.service-tabs {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  
  .tab-item {
    flex: 1;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    &.active {
      color: #ff7a45;
      font-weight: bold;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
        background-color: #ff7a45;
      }
    }
  }
}

// 服务列表
.service-list {
  background-color: #fff;
  padding: 20rpx 30rpx;
  
  .service-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1px solid #f5f5f5;
    
    &:last-child {
      border-bottom: none;
    }
    
    .service-image {
      width: 200rpx;
      height: 150rpx;
      border-radius: 10rpx;
      margin-right: 20rpx;
    }
    
    .service-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      
      .service-title {
        font-size: 32rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 10rpx;
      }
      
      .service-desc {
        font-size: 26rpx;
        color: #999;
        margin-bottom: 20rpx;
      }
      
      .service-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .service-price {
          display: flex;
          align-items: baseline;
          color: #ff7a45;
          
          .price-symbol {
            font-size: 24rpx;
          }
          
          .price-value {
            font-size: 36rpx;
            font-weight: bold;
          }
        }
        
        .service-time {
          display: flex;
          align-items: center;
          font-size: 24rpx;
          color: #999;
          
          text {
            margin-left: 6rpx;
          }
        }
      }
    }
  }
}

// 资讯部分
.news-section {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx 30rpx;
  
  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 32rpx;
      font-weight: bold;
      color: #333;
    }
    
    .more {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #999;
      
      text {
        font-size: 24rpx;
        font-weight: normal;
        color: #999;
        margin-right: 6rpx;
      }
    }
  }
  
  .news-list {
    .news-item {
      display: flex;
      justify-content: space-between;
      padding: 20rpx 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .news-content {
        flex: 1;
        margin-right: 20rpx;
        
        .news-title {
          font-size: 28rpx;
          color: #333;
          line-height: 1.4;
          margin-bottom: 20rpx;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .news-info {
          font-size: 24rpx;
          color: #999;
        }
      }
      
      .news-image {
        width: 160rpx;
        height: 120rpx;
        border-radius: 8rpx;
      }
    }
  }
}

// 底部导航栏
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100rpx;
  background-color: #fff;
  display: flex;
  border-top: 1px solid #eee;
  
  .tab-bar-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #999;
    
    &.active {
      color: #ff7a45;
    }
    
    text {
      margin-top: 6rpx;
    }
  }
}
</style>
